<!-- 商城退货选择退货方式 -->
<template>
	<view class="refund">
		<!-- 标题 -->
		<view class="storeTitle" @tap="goStore(orderData.seller_id)">
			<image v-if="orderData.sellerInfo" :src="orderData.sellerInfo.online_logo" mode=""></image>
			<text v-if="orderData.sellerInfo" class="title">{{orderData.sellerInfo.online_name}}</text>
			<text class="yticon icon-you"></text>
		</view>
		<!-- 商品列表 -->
		<view class="titleitem">
			<view class="item" v-for="(item, index) in orderData.orderGoods" :key="index">
				<!-- 图片 -->
				<view class="img">
					<image :src="item.cart_info.productInfo.image" mode=""></image>
				</view>
				<!-- 信息 -->
				<view class="msg">
					<text class="clamp">{{item.cart_info.productInfo.store_name}}</text>
					<view class="a">
						<text v-if="item.cart_info.productInfo.attrInfo">{{item.cart_info.productInfo.attrInfo.suk||''}}</text>
						<text>× {{item.cart_info.cart_num}}</text>
					</view>
					<view class="b">
						<text></text>
						<view v-if="item.cart_info.productInfo.attrInfo"><text>￥</text><text>{{item.cart_info.productInfo.attrInfo.price}}</text></view>
						<view v-else><text>￥</text><text>{{item.cart_info.productInfo.price}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btn" @tap="refund(2)">仅退款</view>
			<view class="btn" @tap="refund(3)">退货退款</view>
		</view>
	</view>
</template>

<script>
	import {
		orderReturn,
	} from "@/api/mall.js"
	export default {
		data() {
			return {
				oid: '',
				cart_id_arr: [],
				orderData: {},
			};
		},
		onLoad(option) {
			this.oid = option.oid
			this.cart_id_arr = option.cart_id_arr.split(",")
			orderReturn({
				oid:this.oid,
				product: this.cart_id_arr
			}).then(res => {
				this.orderData = res.data
			})
		},
		methods: {
			// 申请退款
			refund(type) {
				if (type == 2) {
					uni.redirectTo({
						url: "./refund?oid=" + this.oid + "&pid=" + this.cart_id_arr + "&type=2"
					})
				} else if (type == 3){
					uni.redirectTo({
						url: "./refund?oid=" + this.oid + "&pid=" + this.cart_id_arr + "&type=3"
					})
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	// 标题
	.storeTitle {
		border-top: 20rpx solid #eee;
		padding: 0 24rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		line-height: 50rpx;
		color: #333;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 15rpx;
			font-size: 28rpx;
		}

		.icon-you {
			margin-top: 4rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
		}
	}

	.titleitem {
		border-bottom: 1rpx solid #eee;
		padding: 0 24rpx 30rpx;

		.item {
			margin-top: 30upx;
			height: 140upx;
			display: flex;

			.img {
				width: 140upx;
				height: 140upx;
				background: rgba(220, 220, 220, 1);

				image {
					width: 140upx;
					height: 140upx;
				}
			}

			.msg {
				width: 540upx;
				height: 140upx;
				margin-left: 20upx;

				.clamp {
					height: 30upx;
					line-height: 30upx;
					font-size: 26upx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.a {
					display: flex;
					height: 80upx;
					line-height: 80upx;
					justify-content: space-between;
					font-size: 20upx;
					color: #999;
				}

				.b {
					display: flex;
					height: 30upx;
					line-height: 30upx;
					justify-content: space-between;

					view {
						display: flex;
						justify-content: space-between;

						text:nth-of-type(1) {
							font-size: 14upx;
							font-weight: bold;
							color: #FB3737;
						}

						text:nth-of-type(2) {
							font-size: 24upx;
							font-weight: bold;
							color: #FB3737;
						}
					}
				}
			}
		}
	}
	.btnBox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 10rpx rgba(0,0,0,.05);
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			width: 300rpx;
			border-radius: 40rpx;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			background-color: $mall-price;
		}
	}
</style>
